<script>

  import { sharedParam } from '../stores/userStore'
  import {onMount} from 'svelte'
  import { writable } from 'svelte/store';
  import { createEventDispatcher } from 'svelte';

  
  const dispatch = createEventDispatcher();
  let check = true;
  let inputValue='';
  let searchResults = [];
  const loginEnabled = writable(false);
  const color = writable('红色');
//控制禁止与允许登录的
  function toggleLoginStatus() {
    loginEnabled.set(!($loginEnabled));
    color.set($loginEnabled ? '红色' : '绿色');
  }
//查询功能的函数
    async function fetchUserInfo() {
      if(inputValue==''){
        alert("请输入您要查询的值！")
        return
      }
      try {
        const response = await fetch('/api/search', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ inputValue }),
        });
      
        if (response.ok) {
          check = false;
          searchResults = await response.json();
        } else {
          check = true;
          alert("查询失败！无该信息！")
        }
      } catch (error) {
        console.error('请求出错', error);
      }
    }
  
    $: {
      dispatch('updateUsers', searchResults);
    }
    $: {
   dispatch('updateUsers', users);
 }

 function checkPermission(param) {
    return param ? "禁止登录" : "允许登录";
  
}


//这个是用于检索所有用户的的用户列表
  let users = [];


  onMount(async () =>{
    const response = await fetch(`/api/list`);
    if(response.ok){
      users = await response.json();
    }
  })

  let paramValue;
  let nameValue='';
  //用来控制页面开与关的
  // onMount(() => {
    // // 使用订阅监听共享的 name 变量的变化
    // const unsubscribe = shareName.subscribe(value => {
      // nameValue = value;
    // });

    // // 在组件销毁时取消订阅
    // return () => {
      // unsubscribe();
    // };
  // });
  onMount(() => {
   const unsubscribe = sharedParam.subscribe(value => {
    paramValue = value;

   });

    return unsubscribe;
  });

  //let Value = localStorage.getItem('flag');

</script>
{#if Boolean(paramValue)}
  <p>欢迎来到用户管理系统</p>
  <div class="search">
    <input type="text" class="search-input" bind:value={inputValue } placeholder="请输入您要搜索的内容" />
    <button class="search-button" on:click={fetchUserInfo}>搜索</button>
  </div>
 
    {#if !check}
    <ul>
    <a>您搜索的信息包括的用户如下：</a>
    {#each searchResults as searchResult}
      <li>
        <img src={`data:image/jpg;base64,${searchResult.useravatar}`} alt={searchResult.username} class="avatar" />
        <div>
          <b>姓名： {searchResult.username}</b>
          <b>邮箱： {searchResult.useremail}</b>
          <b>电话： {searchResult.userphone}</b>
          <b>备注： {searchResult.usernotes}</b>
          <div>{checkPermission(searchResult.useris_banned)}</div>
        </div>
      </li>
    {/each}
    </ul>
    {/if}

  <ul>
    <a>用户列表如下：</a>
    {#each users as user}
      <li>
        <img src={`data:image/jpg;base64,${user.useravatar}`} alt={user.username} class="avatar" />
        <div>
          <b>姓名： {user.username}</b>
          <b>邮箱： {user.useremail}</b>
          <b>电话： {user.userphone}</b>
          <b>备注： {user.usernotes}</b>
          <a >{checkPermission(user.useris_banned)}</a>
        </div>
        <!-- 将 Base64 编码的头像数据直接作为图片的 src 属性值 -->
      </li>
    {/each}
  </ul>
  <br/>


{:else}
  <p>请先登录</p>
  <a href="/login">登录</a>

{/if}




<style>
  button {
    margin-top: 5px;
  }
   form {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
  }
   button {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
  }
   .dropdown {
      width: 200px;
      position: relative;
      display: inline-block;
    }

    .dropdown-select {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
    }

    .dropdown-select option {
      padding: 5px;
      cursor: pointer;
    }
  p
  {
    font-size: 15px;
      font-weight: bold;
      text-align: center;
      padding: 20px;
      background-color: #007bff;
      color: #fff;
  }
  
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
  }
  .search-button {
    padding: 8px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .search-input {
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .search {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .login-form input {
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

  h1, h3 {
    top:0;
    text-align: center;
    color: red;
  }

  a {
    font-size: 20px;
    color: rgb(198, 28, 37);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
  }
  .avatar {
    border-radius: 50%;
    width: 100px; /* 设置图片的宽度 */
    height: 100px; /* 设置图片的高度 */
    object-fit: cover; /* 确保图片在容器中完整显示 */
  }
  .绿色 {
    background-color: green;
  }

  .红色 {
    background-color: red;
  }


</style>